<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, height=1330, initial-scale=1, maximum-scale=1">
    <title>个人中心</title>
    <script type="text/javascript" src="../tooljs/jquery.js"></script>
    <script type="text/javascript" src="../js/headModule.js"></script>
    <script type="text/javascript" src="../js/bottomModule.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        /*width: 750px;*/
    }
    div[name="middleModule"]{
        padding-top: 48px;
        padding-bottom: 98px;
        overflow-y: auto;
    }

    div[name="personalInfo"]{
        background-image:url(../images/bac_750X250.jpg);
        background-size:750px 250px;
        background-repeat:no-repeat;
    }
    .headPortrait{
        display: block;
        width: 40%;
        height: 250px;
        float: left;
    }
    .perInfo{
        width: 60%;
        height: 250px;
        float: left;
    }
    .perName{
        font-size: 32px;
        color: #f0f2f8;
        margin-top:70px;
    }
    .perPhoneAndAddress{
        font-size: 26px;
        color: #ffffff;
        margin-top:20px;
    }
    .headPortrait img{
        margin-left: 50px;
        margin-top: 25px;
    }
    .shopCar{
        width: 25%;
        float: left;
        height: 100%;
        border-right:solid 1px #333333;
    }
    .goodAttach{
        width: 25%;
        float: left;
        height: 100%;
        border-right:solid 1px #333333;
    }
    .shopAttach{
        width: 25%;
        float: left;
        height: 100%;
        border-right:solid 1px #333333;
    }
    .browsingHistory{
        width: 24%;
        float: left;
        height: 100%;
    }
    .operationListItem{
        width: 20%;
        float: left;
        height: 100%;
    }
    .operationListItem img{
        display: block;
        margin-left: 35%;
        margin-top: 30px;
    }
    .operationListItem span{
        display: block;
        margin-left:25%;
        margin-top:20px;
        font-size: 22px;
    }
    #operationListItemother{
        display: block;
        margin-left: 15%;
        margin-top:20px;
        font-size: 22px;
    }

    .goodsContextItem{
        height: 491px;
        display: block;
        float: left;
    }
    .goodsContextItem:nth-child(odd){
        margin-right: 10px;
    }
    .goodsContextItem img{
        height: 370px;
        width: 370px;
    }
    .goodName{
        font-size: 28px;
        color: #333333;
        display: block;
        padding-top: 10px;
        width: 100%;
    }
    .goodPrice{
        color: #f34B91;
        font-size: 32px;
        display: block;
        padding-top: 20px;
        width: 100%;
    }
</style>
<body style="width: 750px">
<div name="personalCenterPage">
    <div name="headModule">
    </div>
    <div name="middleModule" style="width: 750px;background-color: #f2f2f3;">
        <div name="personalInfo" style="width: 750px;height: 250px">
            <div class="headPortrait">
                <img src="../images/circle.png">
            </div>
            <div class="perInfo">
                <div class="perName">
                    <span>Aimy爱慕</span>
                </div>
                <div class="perPhoneAndAddress">
                    <span>157****1663</span>
                    <span>福建 厦门</span>
                </div>
            </div>
        </div>

        <div name="personalList" style="width:750px;height: 120px;margin-bottom: 16px;background-color:#ffffff;">
            <div class="shopCar">
                <span id="shopCarNum" style="font-size: 28px;color: #f34B91;margin-left:35%;width: 65%;margin-top:15px;display:block;">99</span>
                <span id="shopCarName" style="font-size: 26px;color: #333333;margin-left:23%;margin-top:20px;display: block;">购物车</span>
            </div>
            <div class="goodAttach">
                <span id="goodAttachNum" style="font-size: 28px;color: #f34B91;margin-left:35%;width: 65%;margin-top:15px;display:block;">20</span>
                <span id="goodAttachName" style="font-size: 26px;color: #333333;margin-left:23%;margin-top:20px;display: block;">商品关注</span>
            </div>
            <div class="shopAttach">
                <span id="shopAttachNum" style="font-size: 28px;color: #f34B91;margin-left:35%;width: 65%;margin-top:15px;display:block;">16</span>
                <span id="shopAttachName" style="font-size: 26px;color: #333333;margin-left:23%;margin-top:20px;display: block;">店铺关注</span>
            </div>
            <div class="browsingHistory">
                <span id="browsingHistoryNum" style="font-size: 28px;color: #f34B91;margin-left:35%;width: 65%;margin-top:15px;display:block;">199</span>
                <span id="browsingHistoryName" style="font-size: 26px;color: #333333;margin-left:23%;margin-top:20px;display: block;">浏览记录</span>
            </div>
        </div>

        <div name="operationList" style="height: 130px;width: 100%;background-color: #ffffff;">
            <div class="operationListItem">
                <img src="../images/icons/personal_pay@2x.png">
                <span>待付款</span>
            </div>
            <div class="operationListItem">
                <img src="../images/icons/personal_delivery@2x.png">
                <span>待发货</span>
            </div>
            <div class="operationListItem">
                <img src="../images/icons/personal_receipt@2x.png">
                <span>待收货</span>
            </div>
            <div class="operationListItem">
                <img src="../images/icons/personal_evaluate@2x.png">
                <span>待评价</span>
            </div>
            <div class="operationListItem">
                <img src="../images/icons/personal_refund@2x.png">
                <span id="operationListItemother">退款/售后</span>
            </div>
        </div>

        <div name="goodsRecommend" style="width: 100%">
            <div name="goodsRecommendHead" style="text-align: center;height: 80px;">
            <span style="font-size: 30px;color: #333333;display: block;padding-top: 20px;">商品推荐</span>
            </div>
            <div name="goodsContext" style="width: 100%">
                <div class="goodsContextItem">
                    <img src="../images/timg_140X140.jpg">
                    <div class="goodsContextItemBottom">
                        <span class="goodName">内衣</span>
                        <span class="goodPrice">￥200.00</span>
                    </div>
                </div>

                <div class="goodsContextItem">
                    <img src="../images/timg_140X140.jpg">
                    <div class="goodsContextItemBottom">
                        <span class="goodName">内衣</span>
                        <span class="goodPrice">￥200.00</span>
                    </div>
                </div>

                <div class="goodsContextItem">
                    <img src="../images/timg_140X140.jpg">
                    <div class="goodsContextItemBottom">
                        <span class="goodName">内衣</span>
                        <span class="goodPrice">￥200.00</span>
                    </div>
                </div>

                <div class="goodsContextItem">
                    <img src="../images/timg_140X140.jpg">
                    <div class="goodsContextItemBottom">
                        <span class="goodName">内衣</span>
                        <span class="goodPrice">￥200.00</span>>
                    </div>
                </div>

                <div class="goodsContextItem">
                    <img src="../images/timg_140X140.jpg">
                    <div class="goodsContextItemBottom">
                        <span class="goodName">内衣</span>
                        <span class="goodPrice">￥200.00</span>
                    </div>
                </div>

                <div class="goodsContextItem">
                    <img src="../images/timg_140X140.jpg">
                    <div class="goodsContextItemBottom">
                        <span class="goodName">内衣</span>
                        <span class="goodPrice">￥200.00</span>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div name="bottomModule">
    </div>
</div>
</body>
<script type="text/javascript">
    var headmodule = headmodal("个人中心","../images/icons/nav_menu@2x.png","../images/icons/nav_news@2x.png","navIcon","chatIcon");
    // document.getElementById("headModule").append(headmodal());
    $('div[name="headModule"]').append(headmodule);
    var bottommodule = bottomModal("../images/icons/tab_home@2x.png","../images/icons/tab_classify@2x.png","../images/icons/tab_publish@2x.png","../images/icons/tab_information@2x.png","../images/icons/tab_my_sel@2x.png")
    $('div[name="bottomModule"]').append(bottommodule);

    $('img[name="img1"]').click(function () {
        window.location.href="../homepage.html";
    })
    $('img[name="img2"]').click(function () {
        window.location.href="classifyPage.html";
    })
    $('img[name="img3"]').click(function () {
        window.location.href="informationCenterPage.html";
    })
</script>
</html>